<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ceshi富文本编辑器</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">
</head>
<body>
<button type="button" class="layui-btn layui-btn-lg" onclick="点击测试获取富文本内容()">点击测试获取富文本内容</button>
<br/>
<button type="button" class="layui-btn layui-btn-lg" onclick="点击测试获取富文本的纯文本内容()">点击测试获取富文本的纯文本内容</button>
<br/>
<button type="button" class="layui-btn layui-btn-lg" onclick="获取编辑器选中的文本()">获取编辑器选中的文本</button>
<br/>
<form class="layui-form" action="" lay-filter="testform2">
    <div class="layui-form-item">
        <label class="layui-form-label">富文本</label>
        <div class="layui-input-block">
            <textarea id="demo001" style="display: none;" lay-verify="content"></textarea>
        </div>
    </div>
</form>
<script src="../zujian/layui/layui.all.js"></script>
<script>



    let layedit =null;
    let index =null;

    layui.use('layedit', function(){
         layedit = layui.layedit;
        layedit.set({
            uploadImage: {
                url: 'http://127.0.0.1:80/phptest01/phpTestJieShouPic.php' //接口url
                //url: 'http://127.0.0.1:803/testlayuiuploadpic' //接口url
                ,type: 'post' //默认post
                //客户端接收文件的key
                ,filed:'file'
            }
        });
//注意：layedit.set 一定要放在 build 前面，否则配置全局接口将无效。
        //也就是说LayEdit并不提供服务端的图片接受，但你需要在图片上传成功后对LayEdit返回如下格式的JSON信息：

        // {
        //     "code": 0 //0表示成功，其它失败
        //     ,"msg": "" //提示信息 //一般上传失败后返回
        //     ,"data": {
        //         "src": "图片路径"
        //         ,"title": "图片名称" //可选
        //     }
        // }




        //建立编辑器
         index = layedit.build('demo001',{
            // 重新定制编辑器工具栏，如： tool: ['link', 'unlink', 'face']
            tool: [
                'strong' //加粗
                ,'italic' //斜体
                ,'underline' //下划线
                ,'del' //删除线

                ,'|' //分割线

                ,'left' //左对齐
                ,'center' //居中对齐
                ,'right' //右对齐
                ,'link' //超链接
                ,'unlink' //清除链接
                ,'face' //表情
                ,'image' //插入图片
                ,'help' //帮助
            ]
            //不显示编辑器工具栏，一般用于隐藏默认配置的工具bar
            ,hideTool:['help']
            ,height:310
            // 设定图片上传接口，用上面的set就不用这个,如：uploadImage: {url: '/upload/', type: 'post'}
            // ,uploadImage: {url: './pic/', type: 'post'}
        });


    });




    layui.use('form', function(){
        let form = layui.form;
        form.verify({
            // textarea 数据无法同步提交的时候用
            content:function(value) {
                return layedit.sync(index);
            }
        });

    });













    function 点击测试获取富文本内容() {
        //获得编辑器的内容
        //参数 index： 即执行layedit.build返回的值
        let 富文本集内容=layedit.getContent(index);
        layer.alert(富文本集内容);
    }

    function 点击测试获取富文本的纯文本内容() {
        let  纯文本内容=layedit.getText(index);
        layer.alert(纯文本内容);
    }

    function 获取编辑器选中的文本() {
    //获取编辑器选中的文本
    // 参数 index： 同上
        let fuck=layedit.getSelection(index);
        layer.alert(fuck);
    }

</script>




<!--也许你会觉得LayEdit的功能实在有点少吧，尤其是跟百度的UE这些重量级编辑器相比。
是的，LayEdit的工具Bar还并不多，这主要是受制于Layui第一个版本的发布时间，
一个功能丰富的编辑器需要较长时间的打磨，而Layui 1.0显然等不及。
但我们会在后续版本视情况针对LayEdit进行功能升级，
其中会包括：HTML源代码编辑、字体颜色、字体大小、字体格式、插入表格、插入列表、插入引用块、插入代码、
插入附件、分割线、预览、二次开发工具Bar的接口支持等等。-->

<!--在保证功能完备的同时，也会格外注重代码的轻量性。-->
</body>
<!--
下面是接受图片的php代码
<?php


<?php
header('Access-Control-Allow-Origin:*');

try {
    $file=$_FILES["file"];
    move_uploaded_file($file['tmp_name'], 'E:/doit/set/nginx/nginx-1.17.6/html/'.$file['name']);
} catch (Exception $e) {
    echo $e->getMessage();
}


echo '{
  "code": 0
  ,"msg": "华工科技"
  ,"data": {
    "src": "http://127.0.0.1:80/'.$file['name'].'"
    ,"title": "图片名称"
  }
}';




-->
</html>